<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        #box{
            width: 191px;
            border: 1px solid #ccc;
            margin: 20px auto;
            overflow: hidden;
        }
        ul{
            width: 380px;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        ul li{
            float: left;
            margin: 5px;
            width: 180px;
        }
        h4{
            font-weight: 600;
            background-color: #e9e5e3;
            text-align: center;
            height: 30px;
            line-height: 30px;
            width: 190px;
        }
        #box .yi p,#box .er p,#box .san p{
            width: 100%;
            font-size: 12px;
            color: white;
            font-weight: 400;
            padding-left:20px;
            line-height: 20px;
            height: 20px; 
        }
        #box .yi p{
            background-color: #d96160;
        }
        #box .er p{
            background-color: #134752;
        }
        #box .san p{
            background-color: #2271af;
        }
        #box .one p{
            position: relative;
            top: -25px;
        }
        #box .ccc p{
            position: relative;
            left: -190px;
        }
        #box .ccc img{
            position: relative;
        }
        #box .one img{
            position: relative;
        }
        .one{
            cursor: pointer;
            width: 180px;
            height: 150px;
        }
        .ccc p{
            opacity :0;
        }
        .er,.san{
            position: relative;
            top: -20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <h4>专辑推荐</h4>
        <div class="yi">
            <ul class="clearfix">
                <li class="one">
                    <img src="../images/1_1.jpg" alt="">
                    <p>COCOON/可可尼</p>
                </li>
                <li class="ccc">
                    <img src="../images/1_2.jpg" alt="">
                    <p>几何为网-极致绚烂</p>
                </li>
            </ul>
        </div>
        <div class="er">
            <ul class="clearfix">
                <li class="one">
                    <img src="../images/2_1.jpg" alt="">
                    <p>INSUN/恩裳</p>
                </li>
                <li class="ccc">
                    <img src="../images/2_2.jpg" alt="">
                    <p>2013春印象</p>
                </li>
            </ul>
        </div>
        <div class="san">
            <ul class="clearfix">
                <li class="one">
                    <img src="../images/3_1.jpg" alt="">
                    <p>JNBUY/江南布衣</p>
                </li>
                <li class="ccc">
                    <img src="../images/3_2.jpg" alt="">
                    <p>NANMENG/南梦</p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>
    // 鼠标进入切换图片
    $('.yi .one').mouseover(function(){
        $('.yi .ccc p').stop().animate({top:-25,opacity:1},300)
        $('.yi .one p').stop().animate({top:0,opacity:0},100)
        $('.yi .ccc img').stop().animate({left:-190},300)
        $('.yi .one img').stop().animate({left:-190},300)
    })

    $('.er .one').mouseover(function(){
        $('.er .ccc p').stop().animate({top:-25,opacity:1},300)
        $('.er .one p').stop().animate({top:0,opacity:0},100)
        $('.er .ccc img').stop().animate({left:-190},300)
        $('.er .one img').stop().animate({left:-190},300)
    })

    $('.san .one').mouseover(function(){
        $('.san .ccc p').stop().animate({top:-25,opacity:1},300)
        $('.san .one p').stop().animate({top:0,opacity:0},100)
        $('.san .ccc img').stop().animate({left:-190},300)
        $('.san .one img').stop().animate({left:-190},300)
    })


    // 鼠标出去切换图片
    $('.yi .ccc').mouseout(function(){
        $('.yi .ccc p').stop().animate({top:0,opacity:0},300)
        $('.yi .one p').stop().animate({top:-25,opacity:1},100)
        $('.yi .ccc img').stop().animate({left:0},300)
        $('.yi .one img').stop().animate({left:0},300)
    })

     $('.er .ccc').mouseout(function(){
        $('.er .ccc p').stop().animate({top:0,opacity:0},300)
        $('.er .one p').stop().animate({top:-25,opacity:1},100)
        $('.er .ccc img').stop().animate({left:0},300)
        $('.er .one img').stop().animate({left:0},300)
    })
    $('.san .ccc').mouseout(function(){
        $('.san .ccc p').stop().animate({top:0,opacity:0},300)
        $('.san .one p').stop().animate({top:-25,opacity:1},100)
        $('.san .ccc img').stop().animate({left:0},300)
        $('.san .one img').stop().animate({left:0},300)
    })
</script>
<!--,function(){
        $('.er .ccc p').stop().animate({top:0,opacity:0},300)
        $('.er .one p').stop().animate({top:-25,opacity:1},100)
        $('.er .ccc img').stop().animate({left:0},300)
        $('.er .one img').stop().animate({left:0,display:block},300)
    }-->